<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS盒模型</title>
    <link rel="stylesheet" type="text/css" href="css/CSS盒模型.css">

    <script type="text/javascript" src="../common/jquery.min.js"></script>
    <script type="text/javascript" src="js/CSS盒模型.js"></script>
</head>
<body>
<h1>盒子的内容</h1>
<b>常用属性：<br/>overflow:visible（可见不裁剪）/hidden（隐藏）/scroll（滚动：滚动条占据盒子内容的宽高）/auto（如果内容需被
    裁剪，则浏览器以滚动条显示其余内容）；<br/>
text-overflow:clip（裁剪）/ellipsis（省略）</b>
<h2>可见不裁剪</h2>
<p class="see">那新车第一次要以加多少为准呢？其实可以以“跳枪”为止，然后就不用再加了，在油枪跳停后，这就是普遍意义的“加满了”而此时在油箱内其实还是存有一部分空气，不至于像刚才说的那样油箱内部压力过大。
    另一方面，在此时车内油表读数应该是准确的，所以也有利于校验新车油表的准确度。但是，假设如果经常在跳枪后还继续加油，就会造成油箱内1、压力过高；2、油位过高，油位传感器触点处的滑片严重时很有可能直接脱开，造成指示灯报警。</p>
<h2>隐藏</h2>
<p class="hid">那新车第一次要以加多少为准呢？其实可以以“跳枪”为止，然后就不用再加了，在油枪跳停后，这就是普遍意义的“加满了”而此时在油箱内其实还是存有一部分空气，不至于像刚才说的那样油箱内部压力过大。
    另一方面，在此时车内油表读数应该是准确的，所以也有利于校验新车油表的准确度。但是，假设如果经常在跳枪后还继续加油，就会造成油箱内1、压力过高；2、油位过高，油位传感器触点处的滑片严重时很有可能直接脱开，造成指示灯报警。</p>
<h2>滚动条</h2>
<p class="cro">那新车第一次要以加多少为准呢？其实可以以“跳枪”为止，然后就不用再加了，在油枪跳停后，这就是普遍意义的“加满了”而此时在油箱内其实还是存有一部分空气，不至于像刚才说的那样油箱内部压力过大。
    另一方面，在此时车内油表读数应该是准确的，所以也有利于校验新车油表的准确度。但是，假设如果经常在跳枪后还继续加油，就会造成油箱内1、压力过高；2、油位过高，油位传感器触点处的滑片严重时很有可能直接脱开，造成指示灯报警。</p>
<h2>自动</h2>
<p class="au">那新车第一次要以加多少为准呢？其实可以以“跳枪”为止，然后就不用再加了，在油枪跳停后，这就是普遍意义的“加满了”而此时在油箱内其实还是存有一部分空气，不至于像刚才说的那样油箱内部压力过大。
    另一方面，在此时车内油表读数应该是准确的，所以也有利于校验新车油表的准确度。但是，假设如果经常在跳枪后还继续加油，就会造成油箱内1、压力过高；2、油位过高，油位传感器触点处的滑片严重时很有可能直接脱开，造成指示灯报警。</p>
<h2>单行文本溢出裁剪</h2>
<p class="tx cl">那新车第一次要以加多少为准呢？其实可以以“跳枪”为止，然后就不用再加了，在油枪跳停后，这就是普遍意义的“加满了”而此时在油箱内其实还是存有一部分空气，不至于像刚才说的那样油箱内部压力过大。
    另一方面，在此时车内油表读数应该是准确的，所以也有利于校验新车油表的准确度。但是，假设如果经常在跳枪后还继续加油，就会造成油箱内1、压力过高；2、油位过高，油位传感器触点处的滑片严重时很有可能直接脱开，造成指示灯报警。</p>
<h2>多行文本溢出省略</h2>
<h3>Webkit内核浏览器解决方法（Chrome、Edge）</h3>
<a>&lt;pre&gt;标签可定义预格式化的文本；被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。</a><br/>
<a>&lt;code&gt;标签用于表示计算机源代码或者其他机器可以阅读的文本内容。</a><br/>
<b>可以通过添加一个<code>-webkit-line-clamp</code>的私有属性来实现，<code>-webkit-line-clamp</code>是用来限制在一个块元素显示的文本的行数。为了实现这个效果，它需要组合其他的Webkit属性。</b>
<pre>
    display: -webkit-box 将对象作为弹性伸缩盒子模型显示；
    -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式；
    text-overflow: ellipsis 用省略号“…”隐藏超出范围的文本。
</pre>
<p>效果如下</p>
<p class="tx el">那新车第一次要以加多少为准呢？其实可以以“跳枪”为止，然后就不用再加了，在油枪跳停后，这就是普遍意义的“加满了”而此时在油箱内其实还是存有一部分空气，不至于像刚才说的那样油箱内部压力过大。
    另一方面，在此时车内油表读数应该是准确的，所以也有利于校验新车油表的准确度。但是，假设如果经常在跳枪后还继续加油，就会造成油箱内1、压力过高；2、油位过高，油位传感器触点处的滑片严重时很有可能直接脱开，造成指示灯报警。</p>
<h3>浏览器兼容解决方法</h3>
<p>比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(...)的元素模拟实现</p>
<b>但文字未超出行的情况下也会出现省略号,可结合js优化该方法。</b>
<p id="omit" class="tx">
    那新车第一次要以加多少为准呢？其实可以以“跳枪”为止，然后就不用再加了，在油枪跳停后，这就是普遍意义的“加满了”而此时在油箱内其实还是存有一部分空气，不至于像刚才说的那样油箱内部压力过大。
    另一方面，在此时车内油表读数应该是准确的，所以也有利于校验新车油表的准确度。但是，假设如果经常在跳枪后还继续加油，就会造成油箱内1、压力过高；2、油位过高，油位传感器触点处的滑片严重时很有可能直接脱开，造成指示灯报警。
</p>
<h2>盒模型属性</h2>
<b>margin</b><br/>
<pre>
    margin: 上 右 下 左
    margin: 上 左右 下
    margin: 上下 左右
    margin: 上下左右

    注：块级元素的垂直相邻外边距会合并；
        行内元素实际上不占上下外边距，左右边距不会合并；
        浮动元素的外边距不会合并；
        允许指定负的外边距。

    可能的值：inherit  规定从父元素继承外边框（IE8以下不支持）
</pre>
<b>border</b><br/>
<pre>
    border: width style color
    简写样式，即使中间属性少于3个也没问题，如border:solid #ff0000;
    也可以分开写

    注：inherit不支持IE8以下
</pre>
<b>padding</b><br/>
<pre>
    同margin
</pre>
<div></div>
<h3>标准盒模型</h3>
<img src="img/标注盒模型.jpeg" alt=""><br/>
<pre>
    盒子实际占位宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right;
    盒子实际宽度     = border-left + padding-left + width + padding-right + border-right
    高度同理
</pre>
<h3>IE(怪异)盒模型</h3>
<img src="img/IE盒模型.jpeg" alt=""><br/>
<pre>
    盒子实际占位宽度 = margin-left + width + margin-right;
    盒子实际宽度     = width;
    高度同理

    注：IE盒模型的content包含border和padding
</pre>
<b style="color: red;">为解决浏览器兼容性，一般在网页顶端加DOCTYPE声明，统一采用标准盒模型。</b>
</body>
</html>